import {
  Configuration,
  DefinePlugin,
  HtmlRspackPlugin,
  RspackPluginFunction,
} from "@rspack/core";
import { VueLoaderPlugin } from "vue-loader";
import { CostWebpackPlugin } from "../../plugins/cost-webpack-plugin";

const isDev = process.env.NODE_ENV == "development";

const config: Configuration = {
  context: __dirname,
  entry: {
    main: "./src/main.ts",
  },
  resolve: {
    // 如解析import("./index")时；按照此顺序解析模块，"..." 代表着默认的文件扩展名。
    extensions: ["...", ".ts"],
  },
  // 默认是'eval',这里生产构建时关闭
  devtool: isDev ? "eval" : false,
  plugins: [
    new CostWebpackPlugin("rspack-babel") as unknown as RspackPluginFunction,
    new VueLoaderPlugin() as RspackPluginFunction,
    new HtmlRspackPlugin({
      template: "./index.html",
    }),
    new DefinePlugin({
      __VUE_PROD_DEVTOOLS__: isDev,
    }),
  ],
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader",
        options: {
          experimentalInlineMatchResource: true,
        },
      },
      {
        test: /\.(js|ts)x?$/,
        use: [
          {
            loader: "babel-loader",
          },
        ],
        exclude: /node_modules/,
      },
      {
        test: /\.svg/,
        // 将资源转换为单独的文件，并且导出产物地址 https://www.rspack.dev/guide/features/asset-module#supported-asset-module-types
        type: "asset/resource",
      },
    ],
  },
  output: {
    clean: true,
  },
};

export default config;
